<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xhtml PUBLIC  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>

<LINK REL='StyleSheet' HREF="gcalc.css" TYPE="text/css" MEDIA='screen'/>
<script language="javascript" src="vector-01.js"></script>

</head>

<body onload="init()">
<div id='menudiv' style="position:absolute; top:0px; margin-left:-20px; height:25px; width:110%; border-width:0px; border-style:solid; border-bottom-width:2px; ">
<form action="" style="margin-left:20px; ">
<select name="gtype" id='gtype' onmouseover='this.size=3' onmouseout='this.size=1' style="position:absolute;background-color:white; border-width:0px;" onchange="init()">

<option value="onedim" selected='selected'>y equals</option>
<option value="vectors" >Vector Field</option>
<option value="xyplot">x-y Plot</option>
<option value="test">Test</option>
</select>
<select name="gcolor" id='gcolor' scrollqng='no' onmouseover='this.size=8' onmouseout='this.size=1' style="position:absolute; left:150px; background-color:white; border-width:0px;" onchange="init()">
<option value="green" selected="selected" >Green</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="indigo">Indigo</option>
<option value="violet">Violet</option>

</select>


<div id='graphtype' class='menu' onmouseover="this.style.height='230px';this.style.backgroundColor='#D8D8D8 '" onmouseout="this.style.height='20px';this.style.backgroundColor='white'" style='position:absolute;left:300px;overflow:hidden;z-index:100;height:20px;'><a style="text-decoration:underline;display:inline">Range</a>

<h5 style='display:block;margin:5px 10px 10px 10px;'>x min=<input id='xmin' onchange='init()' size='5' value='-5' style='display:inline;'/></h5>
<h5 style='display:block;margin:5px 10px 10px 10px;'>x max=<input id='xmax' onchange='init()' size='5' value='5' style='display:inline;'/></h5>
<h5 style='display:block;margin:5px 10px 10px 10px;'>y min=<input id='ymin' onchange='init()' size='5' value='-5' style='display:inline;'/></h5>
<h5 style='display:block;margin:5px 10px 10px 10px;'>y max=<input id='ymax' onchange='init()' size='5' value='5' style='display:inline;'/></h5>

</div>
</form>
</div>
<div style="position:absolute; top:35px; left:50%; width:800px; margin-left:-400px; height:90%; background-color:yellow; display:inline-block">
<div id='onedim_input'>y(x)=<input id="y" onchange='init()' size='100' value='3*Math.pow(Math.E,-1*x*x)'/><br/></div>
<div id='fieldinput' style='display:none'>dx:<input id="dx" onchange='init()' value='.1*y'/>dy:<input id="dy" onchange='init()' value='-.1*x'/><br/></div>
<div id='xyplot_input' style='display:none;cursor:pointer' onclick="displayPlotInput()">Enter Values<br/></div>

<div id='xyplot_input2' style='display:none;position:absolute;margin-left:-200px;left:0px;width:200px;height:300px;z-index:100;background-color:green;border-style:solid;border-width:0px;overflow:scroll;box-shadow:3px 3px 4px #000;'>
<table border='1' id='datatable'>
	<tr>
	<td>x</td><td>y</td>
	</tr>
	<tr>
	<td><input id="x0" value='' size='5'/></td><td><input id="y0" value='' size='5'/></td>
	</tr>
	
</table>
<h6 style='display:inline;margin:0 0 0 0;cursor:pointer;color:blue;' onclick='addDataPoint()'>Add Data Point</h6>
<h4 style='position:absolute;display:inline;right:5px;bottom:5px;margin:0 0 0 0;cursor:pointer;color:blue;' onclick='displayPlotInput()'>Plot</h4>
</div>
<input type='submit' id="redraw" onclick='init()' value="Plot"/>
<svg height="600" width="600" xmlns="http://www.w3.org/2000/svg" version="1.1" id="canvas">

</svg>
</div>

<div id="debug" style="float:right; margin-top:35px; width:200px; height:500px; overflow:scroll;"></div>



</body>

</html>
